<template>
  <div class="product-comment">
    <cube-scroll
      ref="scroll"
      direction='horizontal'
    >
      <div class="comment-box border" v-for="(item, index) of [1,2,3,4]" :key="index">
        <div class="comment-userinfo">
            <img
              src="//cdn.cnbj0.fds.api.mi-img.com/b2c-data-mishop/bf7bf3632b26775c59759d863d617f49.webp"
              class="avatar">
            <div class="name-time">
              <div class="name">赵晨曦</div>
              <div class="time">2018-12-12</div>
            </div>
            <div class="like">
              <img src=""
                class="like-img">
              <span class="like-count">1282</span>
            </div>
        </div>
        <div class="comment-content">
          这是我第二个小米手机了，红米note7质量很不错，外观漂亮，拍照很满意
        </div>
        <div class="photos-box">
          <img :src="item" class="photo" v-for="(item, index) of photos" :key="index">
        </div>
        <div class="comment-answer">
          <span class="answer-man">官方回复:</span>
          <span class="answer-content">多年以后 ，你还是我心中的海。 一片蔚蓝 ，有阳光沙滩 ，有大鱼拍岸 ...</span>
        </div>
      </div>
    </cube-scroll>
    <div class='more-content'>更多评论<i class='iconfont icon-youjiantou'></i></div>
  </div>
</template>
<script>
export default {
  name: 'ProductComment',
  data () {
    return {
      photos: [
        '//cdn.cnbj0.fds.api.mi-img.com/b2c-data-mishop/b35d33d20fa05e5bc9222258deef9db0.webp',
        '//cdn.cnbj0.fds.api.mi-img.com/b2c-data-mishop/5fa841f592b57b9721f11c0e872bf7b8.webp',
        '//cdn.cnbj0.fds.api.mi-img.com/b2c-data-mishop/d8906a7a8adabee037bda3d55257d750.webp'
      ]
    }
  }
}
</script>
<style lang='stylus' scoped>
.product-comment >>> .cube-scroll-content
  display: inline-block
  white-space: nowrap
.product-comment
  padding-right: .35rem
  .comment-box
    width: 5.6rem
    padding: .3rem .3rem .6rem
    background: #f5f5f5
    border-radius: .2rem
    margin-left: .35rem
    display: inline-block
    .comment-userinfo
      display: flex
      align-items: center
      .avatar
        border-radius: 50%
        width: .7rem
        margin-right: .2rem
      .name-time
        flex: 1
        .name
          font-size: .15rem
          color: #111
        .time
          font-size: .1rem
          margin-top: .1rem
          color: #666
      .like
        width: 1rem
        .like-img
          width: .3rem
        .like-count
          font-size: .1rem
          color: #666
    .comment-content
      white-space: normal
      font-size: .1rem
      line-height: .35rem
      margin: .15rem 0
      color: #000
    .photos-box
      display: flex
      justify-content: space-between
      align-items: center
      height: 1.3rem
      .photo
        width: 1.7rem
    .comment-answer
      white-space: normal
      font-size: .1rem
      line-height: .35rem
      .answer-man
        color: #ff6700
        margin-right: .1rem
      .answer-content
        color: #333
  .more-content
    margin-top: .3rem
    text-align: center
    font-size: .35rem
    color: #4e72a5
    .icon-youjiantou
      font-size: .35rem
</style>
